PERN Stack Course - Postgres, Express, React, and Node

freeCodeCamp.org

7.23M subscribers

335,987 views Mar 19, 2020

Learn the PERN stack in this full tutorial course for beginners. The PERN stack consists of PostgreSQL, Express, React, and Node.js. Learn how to combine these technologies to build a full-stack web application! 🎥 Course developed by The Stoic Programmers. Check out their YouTube channel: https://www.youtube.com/channel/UCAPu... 💻Code: https://github.com/l0609890/pern-todo... ⭐️ Course Contents ⭐️ ⌨️ (0:00) Demo ⌨️ (1:35) Overview Diagram ⌨️ (3:39) Starting Our Server ⌨️ (7:09) Create PostgreSQL Database and Table ⌨️ (13:14) Connect Database and Server ⌨️ (15:30) Build Routes with PostgreSQL Queries ⌨️ (32:37) Restful API Overview ⌨️ (37:54) Set Up the Client Side (React) ⌨️ (40:59) Build The Input Todo Component ⌨️ (50:32) Build The List Todo Component ⌨️ (59:10) Build the Delete Button ⌨️ (1:04:49) Build the Edit Todo Component ⌨️ (1:19:47) PERN Stack Review 🔗 PostgreSQL Installation: https://www.youtube.com/watch?v=fZQI7... Learn more about: 🔗 PostgreSQL: https://www.youtube.com/watch?v=qw--V... 🔗 Express: https://www.youtube.com/watch?v=G8uL0... 🔗 React: https://www.youtube.com/watch?v=DLX62... 🔗 Node.js: https://www.youtube.com/watch?v=RLtyh... Check out free Postman programs for students and educators to help you learn more about APIs: https://www.postman.com/company/stude... Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

Demo

Overview Diagram

Starting Our Server

Create PostgreSQL Database and Table

Connect Database and Server

Build Routes with PostgreSQL Queries

Restful API Overview

Set Up the Client Side (React)

Show less

Embroidered Flat Brim Cap Snapback

Protect the developer's most valuable asset – your head. This flat-brim snapback cap has a sturdy build quality, spun from an 80% acrylic 20% wool blend. freeCodeCamp's iconic Bonfire Function Call logo pops out from above the bill, embroidered in a coarse white thread. All proceeds above cost will go toward making freeCodeCamp better.

Ceramic Coffee Mug Mug

Toast to the developer community with your very own freeCodeCamp Bonfire Function Call mug. This sturdy ceramic mug will hold 11 ounces of your favorite steamy beverage. And yes, it's safe for both dishwashers and microwaves. All proceeds above cost will go toward making freeCodeCamp better. Custom made with 11oz high-quality, ceramic products that are dishwasher safe and easy to clean. Support independent designers through Teespring's product development platform. Dishwasher-friendly.

Triblend Men's Tshirt Triblend Tee

Represent the freeCodeCamp community with pride in this jet-black Triblend T-shirt featuring the iconic "bonfire function call" logo. This rugged shirt is 25% Cotton, 25% Rayon, 50% Polyester, and will withstand hundreds of washes without losing its snugness or color. All proceeds above cost will go toward making freeCodeCamp better. Custom designed graphic is printed in vivid color and high resolution using state of the art color transfer technology. Shirts are made from super soft 100% combed ringspun cotton. Printed in the USA.

Women's T-shirt Women's Classic Tee

Represent the freeCodeCamp community with pride in this jet-black cotton T-shirt featuring the iconic "bonfire function call" logo. All proceeds above cost will go toward making freeCodeCamp better. Custom designed graphic is printed in vivid color and high resolution using state of the art color transfer technology. Shirts are made from super soft 100% preshrunk cotton. Printed in the USA. Guaranteed to last through hundreds of washes.

Cotton-Poly Pullover Hoodie Premium Pullover Hoodie

Stay toasty and dress like a developer with this jet-black cotton-poly pullover hoodie. This hoodie comes with ample Kangaroo pockets to hold your gear, and draw strings to keep you warm in cold environments. And it features freeCodeCamp's iconic "Bonfire Function Call" logo. All proceeds above cost will go toward making freeCodeCamp better. Custom designed graphic is printed in vivid color and high resolution using state of the art color transfer technology. Hoodies & Sweatshirts are made from super soft 50% cotton, 50% polyester. Printed in the USA. Guaranteed to last through hundreds of washes.

Martin

Videos like this are one of the main reasons why I love the internet. Free and high quality education for those who are willing to learn. Thanks a lot!

The Stoic Programmers

Howdy fellow friends! Wow, I greatly appreciate all y'all wonderful feedback and compliments and I wish you all the best in your programming journey. For the people who have checked my youtube channel and saw the pern stack tutorial there, I recommend you all continue to watch that specific tutorial at FreeCodeCamp's Channel because the resolution quality and content are much better there. Cheers and happy coding!

Sean Rasmussen

I use VueJS for my frontend projects, so came to this video for how you integrated Postgres with Express. So many boilerplates and videos use Sequelize ORM to do this, so I was happy to see one that just went bare bones SQL. Great job.

Aron Polner

Pro tip when it comes to using Postman: Create a new collection by Collections -> +New Collections -> in the created folder click on the three dots "..." -> Add request -> Give the request a name like "Get all todos" or something -> Save to your newly created folder. Then adjust the request to whatever suites your needs and press save (which can be found in the top right corner next to the Send button). That way you don't have to recreate all of the calls each time you want to run test towards the backend.

David

Such a concise and thoughtful tutorial! This is among my favourites. Thank you, Stoic!

Karena Garcia

I am so glad I found this tutorial. I have been all over the web looking for this exact thing. Sometimes when you're new to something, you just don't have the vocab to find help on what exactly you're looking for. PERN Stack is new verbage to me, and that has been so nice!

Fredrik Ullman

Really good tutorial ! At times a little too fast paced and non - descriptive of the steps you were taking, but it could be because Im fairly new at writing code in react, and Im still learning the basics. Thank you !

Absolu Bouess

If this is the level of a free course , I wonder what will be the level of value in your paid course !! Loved to see so much care for the viewers and you explaining everything , one word . Wonderful

Terry Marr

Great beginner or refresher video for PERN stack. Some things have changed in react recently and this is a great quick update. It goes fast in a couple of places (postman) but you can stop and pick the testing software you want. Very few tutorials show how it all fits together. Thank you!

Truno Joyo

such an amazing teacher you are ! Please make another project on PERN stack. Will really help us beginner developers!

K man

Use thunder client instead of postman. Its essentially the same thing except its a vscode extension that creates a new sidebar area for testing your API. Good tutorial!

Saish Sankhe

Thank you so much for explaining the PostgreSQL part so well! I was frustrated to work with SQL db with node and this video helped me setup everything perfectly!

Bret Spoehr

This was clearly laid out and explained. Thank you so much for taking the time to be clear. You did NOT leave out crucial information and I was able to complete the entire build and then iterate from it.

Nik Berezovsky

That's a good one! Short, quick, and simple. Ideal for those who are figuring out how to marry those 4 things together for the first time. Thanks, man!

Kevin Carvalho de jesus

That's precisely what I needed to get started with relational DB and Postgres. Such an awesome tutorial! Tks for that guys!

George Krachtopoulos

Amazing video! It is very helpful, and you really know how to explain things clearly to us.

Aldara

This is such a great tutorial! Really easy to follow!

Jackob Litvin

An awesome tutorial, thanks for it! Very nice thing about it is how it shows usage of various tools and approaches by example. The main thing that I miss in it though is deploying the app which would help feeling like "ok, I did it, now I can learn more, expand this project or build something different".

Ario Setiawan

I was Frontend Engineer(especially on react), and i always waiting for MySQL/MariaDB/SQL's with node, it so rare, so with this tutorial it helps me to build fullstack web, thanks!

Lova

Thanks for the help. The exact thing I was looking for when trying to learn Postgres. Great tutorial!

Demo

Overview Diagram

Starting Our Server

Create PostgreSQL Database and Table

Connect Database and Server

Build Routes with PostgreSQL Queries

Restful API Overview

Set Up the Client Side (React)

Build The Input Todo Component

Build The List Todo Component

Build the Delete Button

Build the Edit Todo Component

PERN Stack Review

Embroidered Flat Brim Cap Snapback

Ceramic Coffee Mug Mug

Triblend Men's Tshirt Triblend Tee

Women's T-shirt Women's Classic Tee

Cotton-Poly Pullover Hoodie Premium Pullover Hoodie

Jennifer L

Public

0/140

30.0 seconds

Continue clipping after ad finishes

Can’t create clip while ad is playing

PERN Stack Course - Postgres, Express, React, and Node

freeCodeCamp.org

6.7K

Likes

335,987

Views

2020

Mar 19

Learn the PERN stack in this full tutorial course for beginners. The PERN stack consists of PostgreSQL, Express, React, and Node.js. Learn how to combine these technologies to build a full-stack web application! 🎥 Course developed by The Stoic Programmers. Check out their YouTube channel: https://www.youtube.com/channel/UCAPu... 💻Code: https://github.com/l0609890/pern-todo... ⭐️ Course Contents ⭐️ ⌨️ (0:00) Demo ⌨️ (1:35) Overview Diagram ⌨️ (3:39) Starting Our Server ⌨️ (7:09) Create PostgreSQL Database and Table ⌨️ (13:14) Connect Database and Server ⌨️ (15:30) Build Routes with PostgreSQL Queries ⌨️ (32:37) Restful API Overview ⌨️ (37:54) Set Up the Client Side (React) ⌨️ (40:59) Build The Input Todo Component ⌨️ (50:32) Build The List Todo Component ⌨️ (59:10) Build the Delete Button ⌨️ (1:04:49) Build the Edit Todo Component ⌨️ (1:19:47) PERN Stack Review 🔗 PostgreSQL Installation: https://www.youtube.com/watch?v=fZQI7... Learn more about: 🔗 PostgreSQL: https://www.youtube.com/watch?v=qw--V... 🔗 Express: https://www.youtube.com/watch?v=G8uL0... 🔗 React: https://www.youtube.com/watch?v=DLX62... 🔗 Node.js: https://www.youtube.com/watch?v=RLtyh... Check out free Postman programs for students and educators to help you learn more about APIs: https://www.postman.com/company/stude... Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

Demo

Overview Diagram

Starting Our Server

Create PostgreSQL Database and Table